/*
 * @Author: your name
 * @Date: 2021-06-18 11:10:44
 * @LastEditTime: 2021-06-26 20:52:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edtoken
 * @FilePath: \totiao\src\store\index.js
 */
import Vue from 'vue'
import Vuex from 'vuex'
// 导入获取用户信息的api接口
import { getUserInfoApi, getUserProfileApi } from '../api/userApi'

Vue.use(Vuex)
// 初始的不含任何数据的对象state对象
let initState = {
  tokenInfo: {
    token: '',
    refresh_token: ''
  },
  // 用户的基本信息
  userInfo: {},
  // 用户的简介信息
  userProfile: {}
}

// 从localStorage 中读取本地的数据
const stateStr = localStorage.getItem('state')
// 判断stateStr是否等于null
if (stateStr != null) {
  initState = JSON.parse(stateStr)
}

export default new Vuex.Store({
  state: initState,
  // tokenInfo对象的格式为{token,refresh_token}
  mutations: {
    // 专门用来修改tokenInfo的方法
    // 组件中调用方法有两种
    // this.$store.commit('方法名,参数)
    // ...mapMutations(['updateTokenInfo'])
    updateTokenInfo (state, payload) {
      state.tokenInfo = payload
      // 把修改过的state数据源持久化的存储到localStorage
      localStorage.setItem('state', JSON.stringify(state))
    },

    // 更新用户的基本信息,形参中的payload就是用户的信息对象
    updataUserInfo (state, payload) {
      state.userInfo = payload
      // 把修改过的state数据源持久化的存储到localStorage
      localStorage.setItem('state', JSON.stringify(state))
    },

    // 更新用户的简介信息
    updataUserProfile (state, payload) {
      state.userProfile = payload
      // 把修改过的state数据源持久化的存储到localStorage
      localStorage.setItem('state', JSON.stringify(state))
    },

    // 清空state和本地的数据
    cleanState (state) {
      // 清空state
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}
      // 把清空后的state,持久化存储到本地
      localStorage.setItem('state', JSON.stringify(state))
    }
  },
  actions: {
    // 初始化用户的基本信息
    async initUserInfo (ctx) {
      const { data: res } = await getUserInfoApi()
      if (res.message === 'OK') {
        ctx.commit('updataUserInfo', res.data)
      }
    },

    // 初始化用户简介的信息
    async initUserProfile (ctx) {
      const { data: res } = await getUserProfileApi()
      if (res.message === 'OK') {
        // console.log(res)
        ctx.commit('updataUserProfile', res.data)
      }
    }
  },
  getters: {
    // getter本质上是一个计算属性
    avater (state) {
      return state.userInfo.photo || 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  },
  modules: {
  }
})
